<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
      class="login-form">
      <div style="display: flex">
        <h2>登录</h2>
      </div>
      <div class="vertical" style="display: flex; width: 100%">
        <div style="flex: 1">
          <el-form-item>
            <el-button type="primary" color="red" style="width: 100%">QQ登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" color="green" style="width: 100%">微信登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" color="blue" style="width: 100%">支付宝登录</el-button>
          </el-form-item>
        </div>
        <div class="hidden" style="
            width: 1px;
            margin-left: 10px;
            margin-right: 10px;
            background-color: grey;
            height: 135px;
          "></div>
        <div style="flex: 1">
          <el-form-item prop="username">
            <el-input v-model="loginForm.name" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" color="#626aef" @click="handleLogin" style="width: 100%">登录</el-button>
          </el-form-item>
        </div>
      </div>

      <div class="bottom-div">
          <el-button class="bottom-div-button" style="margin:0;" type="primary" color="black" @click="this.$router.push(`/register`)">注册</el-button>
          <el-button class="bottom-div-button" style="margin:0;" type="primary" color="black" @click="this.$router.push(`/corrector`)">忘记密码</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { RouterLink, useRouter } from "vue-router";
import axios from "axios";
export default {
  setup() {
    console.log(useRouter());
  },
  data() {
    return {
      loginForm: {
        name: "",
        password: "",
      },
      loginRules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 调用登录接口
          console.log(JSON.stringify(this.loginForm));
          axios.post('/api/userT/login', this.loginForm).then((res) => {
            console.log(res.data);
            if (res.data.code) {
              localStorage.setItem('id', res.data.data)
              this.$router.push('/home')
            } else {
              window.alert("error");
            }
          })
        } else {
          console.log("请正确填写信息!");
          window.alert("请正确填写信息!");
        }
      });
    },
  },
};
</script>

<style scope>


@media only screen and (max-width: 640px) {
  .vertical {
    flex-direction: column;
  }

  .hidden {
    display: none;
  }
}
</style>

<style>

.bottom-div {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.bottom-div-button {
  width: 50%;
}

@media only screen and (max-width: 640px) {
  .bottom-div{
    flex-direction: column;
    flex-wrap: wrap;
  }

  .bottom-div-button{
    width: 100%;
  }
}
</style>
